<template>
	<div>
		<!-- 路由器:根据不同的地址加载不同的内容/页面 -->
		<!-- 导航 -->
		<ul class="nav-bar">
			<li v-for="value in navs" :key="value">
				{{ value }}
			</li>
		</ul>
		<!-- 展示内容区 -->
		<commponent></commponent>
	</div>
</template>

<script>
import Css from './css'
import Html from './html'
import Es6 from './es6'
import Vue2 from './vue2'
export default {
	data() {
		return {
			navs: [Css.name, Html.name, Es6.name, Vue2.name],
			active: 'Vue2',
		}
	},
	components: { Css, Html, Es6, Vue2 },
}
</script>

<style lang='scss' scoped>
.nav-bar {
	display: flex;
	li {
		margin: 5px 15px;
		padding: 5px;
		cursor: pointer;
		border: 1px solid red;
		border-radius: 4px;
	}
	li.active {
		background: red;
		color: white;
	}
}
</style>